<!doctype html>
<html lang="zh">

<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Happy Birthday</title>
	<link rel="stylesheet" type="text/css" href="../css/styles.css">
</head>

<body>
	<div class="htmleaf-container">
		<div class="wrapper">
			<div class="container">
				<h1>生日快乐</h1>

				<form class="form">
					<input id="userName" name="userName" type="text" placeholder="姓名">
					<input id="pwd" name="pwd" type="password" placeholder="密码">
					<button type="submit" id="login-button">进入</button>
				</form>
			</div>
			<div>
				<img class="girl" src="../img/girl.gif" style="width:15%;height:15%;"> </div>
		</div>
	</div>
	<canvas id="canvas"></canvas>
	<script>
		var can = document.getElementById('canvas');
		var ctx = can.getContext('2d');
		var w = can.width = window.innerWidth;
		var h = can.height = window.innerHeight;

		var count = 30;
		var drops = [];
		window.onresize = function () {
			w = can.width = window.innerWidth;
			h = can.height = window.innerHeight;
		};
		function Drop() { };
		Drop.prototype = {
			init: function () {
				this.x = random(0, w);
				this.y = 0;
				this.r = 1;
				this.color = '#0ff';
				this.vy = random(4, 5);
				this.vr = 1;
				this.a = 1;
				this.va = 0.96;
				this.l = random(h * 0.8, h * 0.9);
			},
			draw: function () {
				if (this.y > this.l) {
					ctx.beginPath();
					ctx.arc(this.x, this.y, this.r, 0, 2 * Math.PI, false);
					ctx.strokeStyle = 'rgba(0,255,255,' + this.a + ')';
					ctx.stroke();
				}
				else {
					ctx.fillStyle = color(this.a);
					ctx.fillRect(this.x, this.y, 2, 10);
				}
				this.update();
			},
			update: function () {
				if (this.y < this.l) {
					this.y += this.vy;
				}
				else {
					if (this.a > 0.03) {
						this.r += this.vr;
						if (this.r > 50) {
							this.a *= this.va;
						}
					}
					else {
						this.init();
					}
				}
			}
		}
		function move() {
			ctx.fillStyle = 'rgba(0,0,0,.1)';
			ctx.fillRect(0, 0, w, h);
			for (var i = 0; i < drops.length; i++) {
				drops[i].draw();
			}
			requestAnimationFrame(move);//调用经动画，递归,请求动画帧
		};
		function setup() {
			for (var i = 0; i < count; i++) {
				(function (j) {
					setTimeout(function () {
						var drop = new Drop();
						drop.init();
						drops.push(drop);
					}, j * 200);
				}(i))//i为传入参数，代替j
			}
		};
		function random(min, max) {
			return Math.random() * (max - min) + min;
		};
		function color(a) {
			var r = Math.floor(Math.random() * 255);//random()方法可返回介于 0~1 之间的一个随机数
			var g = Math.floor(Math.random() * 255);
			var b = Math.floor(Math.random() * 255);
			return 'rgba(' + r + ',' + g + ',' + b + ',' + a + ')';
		};
		setup();
		move();
	</script>

	<script src="../js/jquery.min.js" type="text/javascript"></script>
	<script src="../js/jquery-1.8.4.min.js" type="text/javascript"></script>

</body>

</html>